{% load i18n %}
{% extends "base.html" %}
{% block blogcontainer %}

<style>
/* tables */
table.tablesorter {
	font-family:arial;
	background-color: #CDCDCD;
	margin:10px 0pt 15px;
	font-size: 8pt;
	width: 100%;
	text-align: left;
}
table.tablesorter thead tr th, table.tablesorter tfoot tr th {
	background-color: #e6EEEE;
	border: 1px solid #FFF;
	font-size: 8pt;
	padding: 4px;
}
table.tablesorter thead tr .header {
	background-image: url(/js/tablesorter/bg.gif);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}
table.tablesorter tbody td {
	color: #3D3D3D;
	padding: 4px;
	background-color: #FFF;
	vertical-align: top;
}
table.tablesorter tbody tr.odd td {
	background-color:#F0F0F6;
}
table.tablesorter thead tr .headerSortUp {
	background-image: url(/js/tablesorter/asc.gif);
}
table.tablesorter thead tr .headerSortDown {
	background-image: url(/js/tablesorter/desc.gif);
}
table.tablesorter thead tr .headerSortDown, table.tablesorter thead tr .headerSortUp {
background-color: #8dbdd8;
}	
</style>
<script type="text/javascript" src="/js/tablesorter/jquery.tablesorter.min.js"></script>
<script>		

function get_table_from_array(records, columnDisplayNames, columnAttributeNames, actionLinks, tableID){
	var resultHTML = "<table id=\"" + tableID + "\" class=\"tablesorter\">";
	resultHTML += "<thead><tr>";
	for(var i=0;i<columnDisplayNames.length; i++)
	{
		resultHTML += "<th>" + columnDisplayNames[i] + "</th>";
	}
	
	resultHTML += "<th> Actions </th>";
	resultHTML += "</tr></thead>";
	resultHTML += "<tbody>";
	
	$(records).each(function(i){
		resultHTML += "<tr>";
	
		for(var i=0;i<columnAttributeNames.length; i++){
			resultHTML += "<td>" + $(this).attr(columnAttributeNames[i]) + "</td>";
		}
		
		resultHTML += "<td>"

		for(i=0; i<actionLinks.length; i++){
			var link = String(actionLinks[i]).replace("__id__", $(this).attr("id"));
			link = link.replace("__key__", $(this).attr("key"));
			resultHTML += link + " ";
		}

		resultHTML += "</td>"

		resultHTML += "</tr>";		
	});
	resultHTML += "</tbody>";
	resultHTML += "</table>";
	return resultHTML;
}

var listFilters = {};
var listLinks = {};
var listActions = {};

$(document).ready(function() {

	// get lists
	url = "/admin/list/";
	$.getJSON(url,{},function(response){
		var result = "";
		for(var i = 0; i < response["lists"].length; i++) {
			result += '<option value="' + response["lists"][i] + '">' + response["lists"][i] + '</option>';
		}
		$("#lists").html(result);
		$("#lists option:first").attr("selected", "selected");	
		listFilters = response["listFilters"];
		listLinks = response["links"];
		listActions = response["action_urls"];
				
		showListFilter();
		$('#lists').change(function(){
			showListFilter();
		});	
		
	});
	
});

function showListFilter(){
	var list = $("#lists").val();
	var result = "";
	for(item in listFilters[list]){
		// assemble the form elements... 
		if ($.isArray(listFilters[list][item])) {
			// add a select list for this item	
			result += item + ": ";
			result += "<select id='" + item + "'>"
			for (var i = 0; i < listFilters[list][item].length; i++) {
				result += '<option value="' + listFilters[list][item][i] + '">' + listFilters[list][item][i] + '</option>';
			}
			result += "</select>";
			result += "<br>";
		}
		else {
			result += item + ": ";
			result += "<input type='text' id='" + item + "'>";
			result += "<br>";
		}
		
	}
	
	$("#filter").html(result);
	
	showGlobalActions();
}

function showGlobalActions(){
		//  start fresh
		$("#global_actions").html("");

		// add a search button w/click event
		$("#global_actions").append("<input type='button' id='search' value='search'>");
		$('#search').click(function(){
			getFilteredList();
		});					
		
		var list = $("#lists").val();
		for (var i = 0; i < listActions[list].length; i++) {	
			var action = listActions[list][i]["action"];
			var action_id = String(action).toLowerCase().replace(/ /g, "_");
			var url = listActions[list][i]["url"];
			$("#global_actions").append("<input type='button' id='"+ action_id +"' value='"+ action +"'>");			
			$('#' + action_id).click(function(){
				$.getJSON(url,{},function(response){
					if(response["status"]=="success"){
						alert("Action complete: " + action + ".");					
					}else{
						alert("Action failed: " + action + ".");
					}
					if(response["totals"]){
						alert(response["totals"]);
					}
				});
			});			
		}
	
}

function getFilteredList(){
	var list = $("#lists").val();
	var result = "";
	var url = "/admin/list/" + list + "/";
	for(item in listFilters[list]){
		// assemble the REST url... 
		var current_value = $("#" + item).val();
		if(String(current_value).length > 0){
			url += item + "/" + current_value + "/";
		}
	}
	
	$.getJSON(url,{},function(response){		
		var resultHTML = get_table_from_array(response["records"], response["names"], response["attributes"], listLinks[list], "list_results");
		$("#table").html(resultHTML);
		
		$("#table").html(resultHTML);
		$("#list_results").tablesorter();		
	});
}

</script>

<h2>Comicaster Admin Util</h2>
<div><select id="lists"></select></div>
<div id="filter"></div>
<div id="global_actions"></div>
<div id="table"></div>

{% endblock %}